/*
Write your variables here. All available variables can be
found in element-ui/packages/theme-chalk/src/common/var.scss.
For example, to overwrite the theme color:
*/
/* icon font path, required */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

$theme-color:#77C87F;

$main-text:#2E2D27;

$sub-text:#CCCAC4;

.main-text{
  color: $main-text;
}

.sub-text{
  color: $sub-text;
}

.theme-text{
  color: $theme-color;
}

*{
  margin: 0;
  padding: 0;
}

// 定义flex等分
@for $i from 0 through 12 {
  .e-flex-#{$i} {
    flex: $i;
  }
}

// 定义字体(px)单位，大于或等于20的都为px单位字体
@for $i from 20 through 40 {
  .e-font-#{$i} {
    font-size: $i + px;
  }
}

// 定义内外边距，历遍1-80
@for $i from 0 through 80 {
  // 只要双数和能被5除尽的数
  @if $i % 2 == 0 or $i % 5 == 0 {
    // 得出：t-margin-30或者t-m-30
    .e-margin-#{$i}, .e-m-#{$i} {
      margin: $i + px!important;
    }

    // 得出：t-padding-30或者t-p-30
    .e-padding-#{$i}, .e-p-#{$i} {
      padding: $i + px!important;
    }

    @each $short, $long in l left, t top, r right, b bottom {
      // 缩写版，结果如： e-m-l-30
      // 定义外边距
      .e-m-#{$short}-#{$i} {
        margin-#{$long}: $i + px!important;
      }

      // 定义内边距
      .e-p-#{$short}-#{$i} {
        padding-#{$long}: $i + px!important;
      }

      // 完整版，结果如：t-margin-left-30
      // 定义外边距
      .e-margin-#{$long}-#{$i} {
        margin-#{$long}: $i + px!important;
      }

      // 定义内边距
      .e-padding-#{$long}-#{$i} {
        padding-#{$long}: $i + px!important;
      }
    }
  }
}

.e-flex {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
}

.e-relative,
.e-rela {
  position: relative;
}

.e-absolute,
.e-abso {
  position: absolute;
}

.e-flex-wrap {
  flex-wrap: wrap;
}

.e-flex-nowrap {
  flex-wrap: nowrap;
}

.e-col-center {
  align-items: center;
}

.e-col-top {
  align-items: flex-start;
}

.e-col-bottom {
  align-items: flex-end;
}

.e-flex-center {
  justify-content: center;
}

.e-flex-left {
  justify-content: flex-start;
}

.e-flex-right {
  justify-content: flex-end;
}

.e-flex-between {
  justify-content: space-between;
}

.e-flex-around {
  justify-content: space-around;
}

.e-text-left {
  text-align: left;
}

.e-text-center {
  text-align: center;
}

.e-text-right {
  text-align: right;
}

/*只显几行*/
@for $i from 1 through 4 {
  .e-show-#{$i}-line{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $i;
    overflow: hidden;
  }
}

/*flex布局水平居右*/
.e-flex-right{
  margin-left: auto;
}

/*flex普通*/
.e-flex-row{
  display: flex;
}

/*字体加粗*/
.e-weight-font{
  font-weight: bold;
}

/*不换行*/
.e-nowrap{
  white-space: nowrap;
}

/*数字，字母换行*/
.e-break-all{
  word-break: break-all;
  white-space: normal;
}